<template>
    <div class="app-container">

        <div class="page-header">
            <router-link class="back-link" to="/main/renshi/renshizhidu/lizhizm/lizhizm">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link>
            <h2>月份人事异动令列表</h2>
        </div>
        <!-- 搜索区域 -->
        <div class="filter-container">
            <el-input v-model="listQuery.employeeName" placeholder="员工姓名" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-input v-model="listQuery.idNumber" placeholder="身份证号" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                新增
            </el-button>
            <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatchDelete">
                批量删除
            </el-button>
            <!-- <el-button @click="goBack" icon="el-icon-back">返回</el-button> -->
        </div>

        <!-- 表格区域 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="员工姓名" prop="employeeName" />
            <el-table-column label="身份证号" prop="idNumber" />
            <el-table-column label="入职日期" prop="entryDate" :formatter="formatDate" />
            <el-table-column label="离职日期" prop="leaveDate" :formatter="formatDate" />
            <el-table-column label="部门" prop="department" />
            <el-table-column label="职位" prop="position" />
            <el-table-column label="操作" align="center" width="230">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleView(row)">
                        查看
                    </el-button>
                    <el-button type="success" size="mini" @click="handleUpdate(row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
            @pagination="getList" />
    </div>
</template>

<script>
import { getResignationCertificatePage, deleteResignationCertificate } from '@/api/resignationCertificate'
import Pagination from '@/components/Pagination'

export default {
    name: 'ResignationCertificateList',
    components: { Pagination },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                employeeName: undefined,
                idNumber: undefined
            },
            selectedRows: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.push('/main/renshi/renshizhidu')
        },
        getList() {
            this.listLoading = true
            getResignationCertificatePage(this.listQuery).then(response => {
                this.list = response.data.records
                this.total = response.data.total
                this.listLoading = false
            })
        },
        handleFilter() {
            this.listQuery.pageNum = 1
            this.getList()
        },
        handleSelectionChange(val) {
            this.selectedRows = val
        },
        handleCreate() {
            this.$router.push('/main/renshi/renshizhidu/lizhizm/lizhizm')
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/lizhizm/lizhizm',
                query: { id: row.id, type: 'view' }
            })
        },
        handleUpdate(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/lizhizm/lizhizm',
                query: { id: row.id, type: 'edit' }
            })
        },
        handleDelete(row) {
            this.$confirm('确认删除该记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteResignationCertificate([row.id]).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            })
        },
        handleBatchDelete() {
            if (this.selectedRows.length === 0) {
                this.$message({
                    message: '请选择要删除的记录',
                    type: 'warning'
                })
                return
            }
            this.$confirm('确认删除选中的记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ids = this.selectedRows.map(row => row.id)
                deleteResignationCertificate(ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            })
        },
        formatDate(row, column) {
            const date = row[column.property]
            if (date) {
                return new Date(date).toLocaleDateString()
            }
            return ''
        }
    }
}
</script>

<style scoped>
/* 容器样式 */
.app-container {
    padding: 20px;
    /* background-color: #f5f7fa; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: calc(100vh - 40px);
    width: 1200px;
    margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link:hover {
    opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #303133;
}

.filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px 0px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.filter-item {
    margin-right: 10px;
}

/* 按钮样式 */
.el-button {
    border-radius: 4px;
    padding: 8px 13px;
    font-family: '宋体';
    font-size: 1em;
}
</style>